<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin-bottom: 600px;
        }
    </style>
    <script src="./js/vue.js"></script>
</head>
<body>
    <h3 id="insert"></h3>
    <hr>
    <div id="app">
        <!-- 
        特性：响应式数据功能：
            - HTML标签通过插值表达式绑定Vue的数据变量，当变量发生变化时该标签会重新渲染加载。
            - 插值表达式只能对 Vue 数据变量变化作为响应，而无法修改变量
        -->
        <h3>从仓库中加载数据：{{ msg }}</h3>
        <h3>从仓库中加载数据：{{ msg }}</h3>
        <h3>从仓库中加载数据：{{ info }}</h3>
        <h3>从仓库中加载数据：{{ info }}</h3>
        <h3>从仓库中加载数据：{{ info }}</h3>
        <h3>从仓库中加载数据：{{ info+"-"+msg }}</h3>

        <hr>
        <h3>num:{{ num }}</h3>
        <h3>总价:￥{{ num.toFixed(1) }}</h3>
        <!-- 
        插值表达式 底层调用的 是 DOM 对象的  textContent 属性 进行值得写入操作
            - html格式字符串将不被解析
            - js 转义符将不被识别

        DOM 的内容填充方法
            dom.innerHTML  可以解析字符串形式的标签代码
            dom.innerText  以纯文本形式将值写入页面(JS \n 转义符将被解析为 <br>)
            dom.textContent  以纯文本形式将值写入页面(JS 转义符不被解析)
        -->
        <hr>
        <p>{{ strHtml }}</p>
        <p>{{ str }}</p>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"仓库msg",
            info:"仓库info",
            num:10,
            strHtml:"<span style='color:red'>字符串形式的标签</span>",
            str:"第一行\n第二行\n第三行\n"
        }
    })
</script>
</html>